<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <div>
          <el-button type="primary" round @click="addPermissionBtn(1,'0','add')">主要按钮</el-button>
        </div>
      </el-card>
      <el-table :data="list" border style="width: 100%" row-key="id">
        <el-table-column prop="name" label="名称" width="220" />
        <el-table-column prop="code" label="标识" width="220" />
        <el-table-column prop="description" label="描述" width="270" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="{row}">
            <el-button v-if="row.type === 1" type="primary" size="small" @click="addPermissionBtn(2,row.id,'add')">添加</el-button>
            <el-button type="success" size="small" @click="addPermissionBtn(row.type,row.id,'edit',row)">编辑</el-button>
            <el-button
              v-show="row.children.length===0"
              type="danger"
              size="small"
              @click="delPermissionBtn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="isEdit?'更新':'新增'"
      :visible.sync="dialogVisible"
      width="50%"
      @closed="dialogClose"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="ruleForm.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="ruleForm.description" />
        </el-form-item>
        <el-form-item label="权限启用" prop="enVisible">
          <el-switch
            v-model="ruleForm.enVisible"
            active-text="启用"
            inactive-text="不启用"
            active-value="1"
            inactive-value="2"
          />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onSubmit">{{ isEdit?"更新":"创建" }}</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addPermission, delPermission, getPermissionList, updatePermissionById } from '@/api/permission'
import { transformListToTree2 } from '@/utils'

export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      ruleForm: {
        enVisible: '',
        name: '',
        code: '',
        description: '',
        type: '0',
        pid: ''
      },
      isEdit: false,
      rules: {

      }
    }
  },
  created() {
    this.getPermission()
  },
  methods: {

    onSubmit() {
      if (this.isEdit) {
        this.edit()
      } else {
        this.dialogVisible = false
        console.log(this.ruleForm)
        this.addPermission()
      }
    },
    addPermissionBtn(type, pid, isEdit, row) {
      this.dialogVisible = true
      this.ruleForm.type = type
      this.ruleForm.pid = pid
      if (isEdit === 'add') {
        this.isEdit = false
      } else {
        this.isEdit = true
        this.ruleForm = { ...row }
      }
    },
    delPermissionBtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delPermission(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async getPermission() {
      // 公司里面写代码try和catch都必写,业务成功也要写(找后端要请求成功的字段,前端好去封装请求)
      try {
        // 获取权限管理列表
        const res = await getPermissionList()
        // res.code === 10000 有些后端 通过code码 10000表示业务成功,非10000表示业务代码失败
        if (res.success) {
          this.list = res.data
          console.log('getPermissionList:', res)
          // 因为表格里面需要渲染 树形结构,需要将平铺数据转换为树形结构,带有children的书写,才能出现折叠按钮
          this.list = transformListToTree2(res.data, '0')
        } else {
          this.$message.error('获取权限列表失败')
        }
      } catch (error) {
        console.log('getPermissionList', error)
      }
    },
    async addPermission() {
      try {
        const res = await addPermission(this.ruleForm)
        if (res.success) {
          this.dialogVisible = false
          this.getPermission()
        } else {
          console.log('addPermission:业务码出错')
        }
      } catch (error) {
        console.log(error)
      }
    },
    async delPermission(id) {
      try {
        const res = await delPermission(id)
        if (res.success) {
          this.getPermission()
        } else {
          console.log('delPermission')
        }
      } catch (error) {
        console.log(error)
      }
    },
    async edit() {
      try {
        const res = await updatePermissionById(this.ruleForm)
        if (res.success) {
          console.log(res)
          this.getPermission()
          this.dialogVisible = false
        } else {
          console.log('updatePermissionById')
        }
      } catch (error) {
        console.log(error)
      }
    },
    dialogClose() {
      this.$refs.ruleForm.resetFields()
      this.form = this.$options.data().ruleForm
    }
  }

}

</script>
